<template>
  <div class="app-container">
    <el-row>
        <el-card>
          <div v-html="trainingProgram.content" style="text-align: center" class="editor" :style="styles"></div>
          <el-table
            v-loading="loading"
            :data="programTeachPlanList"
            border
            :span-method="objectSpanMethod"
            style="width: 100%; font-size: 12px;"
            :cell-style="cellStyle"
          >
            <el-table-column
              label="课程平台"
              align="center"
              prop="coursePlatform"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.course_platform" :value="scope.row.coursePlatform"/>
                （{{ scope.row.coursePlatformCredit }}）
              </template>
            </el-table-column>
            <el-table-column
              label="课程模块"
              align="center"
              prop="courseMainModule"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.course_main_module_credit" :value="scope.row.courseMainModule"/>
                （{{ scope.row.courseMainModuleCredit }}）
              </template>
            </el-table-column>
            <el-table-column
              label="课程子模块"
              align="center"
              prop="courseChildrenModule"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.course_children_module" :value="scope.row.courseChildrenModule"/>
              </template>
            </el-table-column>
            <el-table-column
              label="修课要求"
              align="center"
              prop="studyRequire"
            >
              <template slot-scope="scope">
                <dict-tag :options="dict.type.study_require" :value="scope.row.studyRequire"/>
                （{{ scope.row.studyRequireCredit }}）
              </template>
            </el-table-column>
            <el-table-column
              label="课程代码"
              align="center"
              prop="courseCode"
            />
            <el-table-column
              label="课程名称"
              align="center"
              prop="courseName"
            />
            <el-table-column
              label="学分"
              align="center"
              prop="creditComputed"
              width="50"
            />
            <el-table-column
              label="学时分配"
              align="center"
            >
              <el-table-column
                prop="totalHours"
                label="总学时"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.row.totalHours + (scope.row.totalHoursUnit == null ? '' : scope.row.totalHoursUnit)}}
                </template>
              </el-table-column>
              <el-table-column
                prop="theoryHours"
                label="理论"
                width="50"
              >
              </el-table-column>
              <el-table-column
                label="实践"
                align="center"
              >
                <el-table-column
                  prop="experimentHours"
                  label="实验"
                  width="50"
                >
                  <template slot-scope="scope">
                  <span v-if="scope.row.experimentHoursUnit">{{
                      scope.row.experimentHours
                    }}{{ scope.row.experimentHoursUnit }}</span>
                    <span v-else>{{ scope.row.experimentHours }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="otherHours"
                  label="其他"
                  width="50"
                >
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="开课学期"
              align="center"
              prop="semesterStr"
              width="70"
            />
          </el-table>
        </el-card>
    </el-row>
  </div>
</template>

<script>
import { getCultivationPlanByUserInfo } from '@/api/train/talentCultivationPlan'
import Treeselect from '@riophae/vue-treeselect'
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: 'ProgramTeachPlan',
  components: { Treeselect },
  dicts: ['sys_open_status', 'course_children_module', 'course_platform', 'course_main_module_credit', 'study_require'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 方案教学计划表格数据
      programTeachPlanList: [],
      trainingProgram: {},
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      subjectName: '',
      courseList: [],
      active: 0,
      mergeConfig: {
        labels: ['课程平台', '课程模块', '课程子模块', '修课要求', '课程代码', '课程名称', '学分'],
        subtotals: ['小计：', '合计：']
      }
    }
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询方案教学计划列表 */
    getList() {
      this.loading = true
      getCultivationPlanByUserInfo().then(response => {
        this.trainingProgram = response.data.trainingProgram
        this.programTeachPlanList = response.data.programTeachPlanVoList
        this.loading = false
      })
    },
    // 处理表格合并行和列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 处理行合并
      if (columnIndex < 4) { // 只处理前三列（课程平台、课程模块、课程子模块）的行合并
        const rows = this.programTeachPlanList
         const fields = ['coursePlatform', 'courseMainModule', 'courseChildrenModule', 'studyRequire']
        const field = fields[columnIndex]

        // 获取当前字段的合并信息
        const spanArr = []
        let pos = 0

        rows.forEach((item, index) => {
          if (index === 0) {
            spanArr.push(1)
            pos = 0
          } else {
            // 判断当前行与上一行是否相同
            if (rows[index][field] === rows[index - 1][field] &&
              // 对于第二列和第三列，还需要检查前面的列是否相同
                (columnIndex === 0 ||
                 (columnIndex === 1 && rows[index]['coursePlatform'] === rows[index - 1]['coursePlatform']) ||
                 (columnIndex === 2 && rows[index]['courseMainModule'] === rows[index - 1]['courseMainModule'] &&
                                     rows[index]['coursePlatform'] === rows[index - 1]['coursePlatform']) ||
                 (columnIndex === 3 && rows[index]['courseChildrenModule'] === rows[index - 1]['courseChildrenModule'] &&
                                     rows[index]['courseMainModule'] === rows[index - 1]['courseMainModule'] &&
                                     rows[index]['coursePlatform'] === rows[index - 1]['coursePlatform']))) {
                spanArr[pos] += 1
                spanArr.push(0)
            } else {
              spanArr.push(1)
              pos = index
            }
          }
        })

        const span = spanArr[rowIndex]
        return {
          rowspan: span,
          colspan: span > 0 ? 1 : 0
        }
      }

      // 处理小计行的列合并
      const { labels, subtotals } = this.mergeConfig

      // 获取当前列的标签
      const currentLabel = this.getColumnLabel(column)
      // 检查是否是需要合并的列
      const mergeColumnIndex = labels.indexOf(currentLabel)

      // 检查当前行是否是小计行
      const isSubtotalRow = this.isSubtotalRow(row)

      if (isSubtotalRow) {
        // 如果是小计行且在合并范围内
        if (mergeColumnIndex !== -1) {
          // 如果是范围内的第一列，则合并
          if (mergeColumnIndex === 0) {
            return {
              rowspan: 1,
              colspan: labels.length
            }
          } else {
            // 其他列隐藏
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }

      // 其他情况返回默认值
      return {
        rowspan: 1,
        colspan: 1
      }
    },

    // 获取列标签
    getColumnLabel(column) {
      return column.label
    },

    // 检查是否是小计行
    isSubtotalRow(row) {
      // 检查行中的任意字段是否包含小计标识
      return this.mergeConfig.subtotals.some(subtotal => {
        return Object.values(row).some(value =>
          typeof value === 'string' && value.includes(subtotal)
        )
      })
    },

    // 单元格样式
    cellStyle({ row, column }) {
      const isSubtotalRow = this.isSubtotalRow(row)
      if (isSubtotalRow) {
        return {
          'background-color': '#f5f7fa',
          'font-weight': 'bold',
          'text-align': 'center'
        }
      }
      return {}
    }
  }

}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-input-number {
  width: 100%;
}

.el-table {
  margin: 0 auto;
}

.el-table td {
  padding: 2px 0;
}

.el-table th {
  padding: 4px 0;
  font-size: 12px;
}

.el-button--mini {
  padding: 3px 8px;
  font-size: 11px;
}

.dialog-footer {
  text-align: right;
}

.custom-tree-node {
  width: 100%;

  .tree-text {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


.ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}

.quill-img {
  display: none;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
